Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ，更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分，並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP24。

在上一回 EP23 看到 AddOrderPage 所顯示的資料尚未有 AddOrderPageViewModel 的處理，在這回就來做些調整吧~~~

首先，先來讓 AddOrderPageViewModel 能夠透過建構子注入給 AddOrderPage 的 BindingContext，找到 AddOrderPage 並加入下列建構方法的設計：

public AddOrderPage(ViewModels.AddOrderPageViewModel viewModel) : this()
{
    BindingContext = viewModel;
}

也記得把無參數建構式的修飾詞改為 private。

完成結果如下圖：

接著打開 MauiProgram.cs 撰寫下列程式碼來加入 AddOrder 與 AddOrderPageViewModel：

builder.Services.AddTransient<Pages.AddOrderPage>();
builder.Services.AddTransient<ViewModels.AddOrderPageViewModel>();

完成結果如下圖：

再來調整一下 AddOrderPageViewModel 的部分：

[QueryProperty(nameof(ProductId), "productId")]
[QueryProperty(nameof(PersonId), "personId")]

幫其設計增加接收參數與設定的 PersonId 與 ProductId 屬性。

[ObservableProperty]
private Product _currentProduct;

public int ProductId
{
    set
    {
        if (value > 0)
            CurrentProduct = App.DataService.GetProduct(value);
    }
}

透過傳入的 ProductId 找出 Product 資料準備呈現。

完成結果如下圖：

[ObservableProperty]
private Person _orderOwner;

public int PersonId
{
    set
    {
        if (value > 0)
            OrderOwner = App.DataService.GetPerson(value);
    }
}

透過傳入的 PersonId 找出 Person 資料準備呈現。

var route = $"{Shell.Current.CurrentState.Location}/../..?isOrder=true&personId={OrderOwner.Id}";
await Shell.Current.GoToAsync(route);

點選 "完成" 時，執行轉跳回 GoodsPage 的動作。

完成結果如下圖：

完成到這邊，就剩下調整 AddOrderPage 的 XAML 標記內容了，找到 AddOrderPage 當中的幾個呈現 Order Owner Name 與 Product SN、Price、Name 的 Label，將其 Text 的值改由 Binding 處理：

Text="Order Owner Name" => Text="{Binding OrderOwner.Name}"

Text="Product SN" => Text="{Binding CurrentProduct.Sn}"

Text="Product Price" => Text="{Binding CurrentProduct.Price}"

Text="Product Name" => Text="{Binding CurrentProduct.Name}"

完成結果如下圖：

到這邊完成後，執行 App 起來後，透過發動 "下訂單" 的模式進入到 AddOrderPage 的話，就會看到葉面上會顯示所點選的聯絡人、商品資訊了！

完成結果如下圖：

而無論是點選 ToolbarItems 的 "完成" 或是點選 Button 的 "完成"，都可以順利跳回到 GoodsPage 顯示商品列表。

完成結果如下展示：